<template>
  <Tabs>
    <TabPane label="堆叠图"
             icon="md-pulse">
      <Card shadow>
        <RadioGroup v-model="filter"
                    type="button"
                    @on-change="handleFilterChange"
                    size="large">
          <Radio label="hour">小时</Radio>
          <Radio label="minute">分钟</Radio>
        </RadioGroup>
        <div style='height:450px'>
          <StackArea :height="450"
                     :showScroll="filter==='minute'"
                     :data="stackAreaRecordList"
                     :scale="stackAreaScale"
                     :isSpinShow="isSpinShowStack"
                     :padding='[50, 30, 180, 70]'>
          </StackArea>
        </div>
      </Card>
    </TabPane>
    <TabPane label="扇形图"
             icon="md-pie">
      <Card shadow>
        <div style='height:450px'>
          <ViserPie :data="pieChartDistribution"
                    :height="450"
                    :padding="[50, 50, 50, 50]"
                    :isSpinShow="isSpinShowPie"/>
        </div>
      </Card>
    </TabPane>
    <TabPane label="地图"
             icon="md-map">
      <Col span="16">
        <Card shadow>
          <Loading :isSpinShow="isSpinShowMap"></Loading>
          <div style=""> 
          <ve-map :data="geographyChartDistributionRecord" :settings="chartSettings" 
             :extend="chartExtend" :height="500+'px'"   />
           </div>
        </Card>
      </Col>
      <Col span="8">
        <Card shadow>
          <p slot="title">排名</p>
          <Table size='small'
                 :columns='Mapcolumns'
                 :data='mapTableData'
                 :loading="tableLoading"
                 :height="450"/>
        </Card>
      </Col>
    </TabPane>
  </Tabs>
  </Card>
  </Row>
</template>
<script>
  import china from "echarts/map/json/china.json"
  import Loading from '@/view/components/loading/loading.vue'
  import StackArea from '@/view/components/viser-stack/viser-stack.vue'
  import ViserPie from '@/view/components/viser-pie/viser-pie.vue'
  import VeMap from 'v-charts/lib/map.common'

  export default {
    name: 'TheBodyChart',
    components: {
      Loading,
      StackArea,
      ViserPie,
      VeMap
    },
    props: {
      stackAreaRecordList: {
        type: Array,
        default: []
      },
      stackAreaScale: {
        type: Array,
        default: []
      },
      isSpinShowStack: {
        type: Boolean,
        default: false
      },
      pieChartDistribution: {
        type: Array,
        default: []
      },
      isSpinShowPie: {
        type: Boolean,
        default: false
      },
      isSpinShowMap: {
        type: Boolean,
        default: false
      },
      geographyChartDistributionRecord: {
        type: Object,
        default: {}
      },
      Mapcolumns: {
        type: Array,
        default: []
      },
      mapTableData: {
        type: Array,
        default: []
      },
      tableLoading: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        filter: 'hour',
        chartSettings: {
        position: 'china',
        // metrics: ['门店数'],
        itemStyle: {
          normal: {
            borderColor: '#72F2FF',
            areaColor: '#7F8FA3',
            borderWidth: 2,
            shadowBlur: 1
          },
          emphasis: {
            borderColor: '#72F2FF',
            areaColor: '#19355A',
            borderWidth: 1,
            shadowBlur: 1
          }
        },
        label: {
          normal: {
            show: true,
            formatter: function (params) {
              if (params.value) {
                return params.name + ' ' + params.value // 地图上展示文字 + 数值
              } else {
                return ''
              }
            },
            color: '#fff',
            backgroundColor: 'rgba(0, 15, 42, 0.3)',
            fontSize: 12,
            align: 'right',
            verticalAlign: 'top',
            lineHeight: 12,
            padding: 4,
            borderRadius: 4
          },
          emphasis: {
            show: true,
            formatter: function (params) {
              if (params.value) {
                return params.name + ' ' + params.value // 地图上展示文字 + 数值
              } else {
                return ''
              }
            },
            color: '#44F0FF'
          }
        },
        zoom: 1,
        selectData: true,
        scaleLimit: {
          min: 1,
          max: 2
        },
        roam: true
          },
        chartExtend: {
          legend: {
            show: false
          },
          // visualMap: [
          //   {
          //     type: 'continuous',
          //     left: 'left',
          //     top: 'bottom',
          //     calculable: true,
          //     text: ['高', '低'],
          //     inRange: {
          //       color: ['#4C627F', '#334C6D', '#19355A']
          //     },
          //     textStyle: {
          //       color: '#fff'
          //     }
          //   }
          // ]
        }  
      }
      //   chartSettings:{
      //     mapOrigin:china,
      //     position:'china',
      //     aspectScale:0.65,
      //     zoom:0.8,
      //     mapGrid:{
      //         left: 0,
      //         right: 10,
      //         top: 10,
      //         bottom:0
      //       }
      //   },
      // }
    },
    mounted () {
     },
    methods: {
      handleFilterChange (filter) {
        this.filter = filter
        this.$emit('listenHandleFilterChange', filter)
      }
    }
  }
</script>

<style lang="less" scoped>
</style>
